<template>
  <div>
    <el-dialog
      :title="seckInfo.isAdd ? '添加秒杀活动' : '修改秒杀规格'"
      :visible.sync="seckInfo.isShow"
      :before-close="cancel"
      center
    >
      <el-form :model="seckillForm" :rules="rules" ref="seckillForm">
        <el-form-item
          prop="title"
          label="活动名称"
          :label-width="formLabelWidth"
        >
          <el-input v-model="seckillForm.title" autocomplete="off"></el-input>
        </el-form-item>
        <!-- 日期时间 -->
        <el-form-item label="活动期限" :label-width="formLabelWidth">
          <el-date-picker
            v-model="timer"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="一级分类" :label-width="formLabelWidth">
          <el-select
            v-model="seckillForm.first_cateid"
            placeholder="请选择一级分类"
            @change="chooseCate"
          >
            <el-option
              :label="items.catename"
              v-for="items in cateList"
              :key="items.id"
              :value="items.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类" :label-width="formLabelWidth">
          <el-select
            v-model="seckillForm.second_cateid"
            placeholder="请选择二级分类"
            @change="chooseshop"
          >
            <el-option
              v-for="ite in secondArr"
              :key="ite.id"
              :label="ite.catename"
              :value="ite.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品" :label-width="formLabelWidth">
          <el-select v-model="seckillForm.goodsid" placeholder="请选择商品">
            <el-option
              v-for="it in thirdArr"
              :key="it.id"
              :label="it.goodsname"
              :value="it.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="状态" label-width="120px" prop="status">
          <el-form-item>
            <el-switch
              v-model="seckillForm.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="2"
            >
            </el-switch>
          </el-form-item>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  seckinfo,
  getGoodslist,
  seckadd,
  seckedit,
} from "../../require/api";
import { mapGetters} from "vuex";
export default {
  data() {
    return {
      seckillForm: {
        title: "", //限时秒杀名称
        begintime: "", //开始时间
        endtime: "", // 结束时间
        first_cateid: "", // 商品一级分类编号
        second_cateid: "", // 商品二级分类编号
        goodsid: "", //商品编号
        status: 1,
      },
      timer: [],
      //规则验证
      rules: {
        title: [
          { required: true, message: "请输入限时秒杀活动", trigger: "blur" },
        ],
      },
      formLabelWidth: "120px",
      // 二级列表
      secondArr: [],
      //三级列表
      thirdArr: [],
    };
  },
  props: ["seckInfo"],
  computed: {
    ...mapGetters({
      cateList: "cate/getCate",
      goodsList: "manage/getGoods",
    }),
  },

  methods: {
    //重置
    reset() {
      //表单内容清空
      this.seckillForm = {
        title: "", //限时秒杀名称
        begintime: "", //开始时间
        endtime: "", // 结束时间
        first_cateid: "", // 商品一级分类编号
        second_cateid: "", // 商品二级分类编号
        goodsid: "", //商品编号
        status: 1,
      };
      // 验证清空
      this.$refs.seckillForm.resetFields();
    },
    // 取消
    cancel() {
      // 弹框消失
      this.$emit("cancel", false);
      // 内容清空
      this.reset();
      // 时间
      this.timer = [];
    },

    // 一级分类选中后确认children完成二级分类
    chooseCate(n, is = true) {
      if (is) {
        // this.secondArr = this.cateList.find((item) => item.id == n).children;
        // console.log(n);
        //   判断是否为新增 若为新增则清空二级目录选项 若是数据回显 不能清空
        this.seckillForm.second_cateid = "";
        this.seckillForm.goodsid = "";
      }
      // 二级目录
      this.secondArr = this.cateList.find((item) => item.id == n).children;

      // console.log(this.secondArr);
    },
    // 二级分类确认
    async chooseshop(n, is = true) {
      if (is) {
        this.seckillForm.goodsid = "";
      }
      // 商品列表请求
      getGoodslist({
        fid: this.seckillForm.first_cateid,
        sid: this.seckillForm.second_cateid,
      }).then((res) => {
        if (res.code == 200) {
          // console.log(res);
          this.thirdArr = res.list;
        }
      });
    },

    // 数据回显
    lookup(id) {
      // console.log(id, "------------");
      this.seckillForm.id = id;
      seckinfo({ id }).then((res) => {
        if (res.code == 200) {
          this.seckillForm = res.list;
          this.seckillForm.id = id;
          // console.log(this.seckillForm);

          // 转成标准日期
          this.timer = [
            new Date(parseInt(res.list.begintime)),
            new Date(parseInt(res.list.endtime)),
          ];
          // // 开始时间
          // this.seckillForm.begintime = new Date(parseInt(res.list.begintime));
          // // 结束时间
          // this.seckillForm.endtime = new Date(parseInt(res.list.endtime));

          // 根据一级分类id查找二级分类的数据
          this.chooseCate(this.seckillForm.first_cateid, false);
          // 根据二级分类id查找相对应的商品数据
          this.chooseshop(this.seckillForm.second_cateid, false);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 处理时间
    chooseTime() {
      // console.log(this.seckillForm);
      // 处理时间
      this.seckillForm.begintime = this.timer[0].getTime();
      this.seckillForm.endtime = this.timer[1].getTime();

      // 转成时间戳
      // this.seckillForm.begintime = new Date().getTime();
      // this.seckillForm.endtime = new Date().getTime();
      // console.log(
      //   this.seckillForm.begintime,
      //   this.seckillForm.endtime,
      //   "======="
      // );
    },

    confirm() {
      this.chooseTime();
      // console.log(this.timer);
      console.log(this.seckillForm);
      this.$refs.seckillForm.validate((valid) => {
        if (valid) {
          if (this.seckInfo.isAdd) {
            // 请求接口添加
            seckadd(this.seckillForm).then((res) => {
              if (res.code == 200) {
                // 成功提示
                this.$message.success(res.msg);
                // 关闭弹窗
                this.cancel();
                // 更新页面
                this.$store.dispatch("seckill/seckillAction");
              } else {
                this.$message.error(res.msg);
              }
            });
          } else {
            // 修改
            seckedit(this.seckillForm).then((res) => {
              console.log(this.seckillForm);
              if (res.code == 200) {
                console.log(res);
                // 成功提示
                this.$message.success(res.msg);
                // 关闭弹窗
                this.cancel();
                // 更新页面
                this.$store.dispatch("seckill/seckillAction");
              } else {
                this.$message.error(res.msg);
              }
            });
          }
        }
      });
    },
  },
  mounted() {
    if (this.$store.getters["cate/getCate"].length == 0) {
      this.$store.dispatch("cate/getCateAction");
    }

    if (this.$store.getters["specs/getSpecs"].length == 0) {
      this.$store.dispatch("specs/getSpecsAction");
    }
  },
};
</script>
<style lang=less scoped >
</style>
